<template>
	<view class="wrapper">
		<scroll-view scroll-y="true" class="main-content">
			<view class="type-filtering">
				<view class="type-btn" :class="{active: item.isSelect}" v-for="(item, index) in typeList" @click="switchingSelection(item)">
				    {{item.label}} 
				</view>
			</view>
			<view class="coupon-list">
				<view class="coupon-item" v-for="(item, index) in 20" :key="index">
					<view class="title">
						视频解锁券
					</view>
					<view class="sub-title">
						可用于解锁精彩视频1个
					</view>
					<view class="validity">
						有效期：2024-06-07
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: [{
					label: '可使用',
					type: 1,
					isSelect: true,
				},{
					label: '已过期',
					type: 2,
					isSelect: false,
				}],
			}
		},
		methods: {
			switchingSelection(item){
				this.typeList.forEach((item, index) => {
					item.isSelect = false;
				})
				item.isSelect = true;
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrapper{
		.type-filtering{
			padding: 30upx 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			.type-btn{
				margin-right: 30upx;
				background: #ffffff;
				border-radius: 10upx;
				padding: 6upx 30upx;
				font-size: 30upx;
				color: #666;
			}
			.active{
				background: #70b5fc;
				color: #ffffff;
			}
		}
		.coupon-list{
			padding: 0 20upx;
			.coupon-item{
				background-image: linear-gradient(to right, #fb928b, #f3b884);
				margin: 20upx 0;
				padding: 20upx;
				border-radius: 20upx;
				.title{
					
				}
				.sub-title{
					
				}
				.validity{
					font-size: 24upx;
				}
			}
		}
	}

</style>
